<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSX不是字符串，不要加引号</title>
    <script src="script/react.development.js"></script>
    <script src="script/react-dom.development.js"></script>

    <!-- 引入babel，将JSX翻译成JS代码，需要在script标签中设置type：text/babel -->
    <script src="script/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">
        // 命令式编程
        // <button>点击</button>
        const btn = React.createElement('button', {}, '点击')

        // 声明式编程
        // 在React中通过JSX（JS扩展）
        // JSX让我们可以以类似于HTML标签的形式编写JS
        // 通过bable来完成翻译成JS的工作
        // JSX实质就是JS的语法糖，React.createElement('button', {}, '点击')
        const btn1 = <button>点击</button>

        const root= ReactDOM.createRoot(document.getElementById('root'))

        root.render(btn1)

        /**
         * JSX注意事项
         *  1. JSX不是字符串，不要加引号
         *  2. JSX中html标签用小写，React组件大写开头
         *  3. JSX中有且只有一个根标签（最外层需要有根标签）
         *  4. 在JSX的标签中必须正确结束（自结束标签必须写‘/’）
         *  5. JSX中可以使用{}嵌入表达式
         *  6. 如果表达式是空值、bool值、undefined，将不会显示
         *  7. JSX中属性可以直接在标签中设置
         *      - class需要使用className
         *      - style中必须使用对象设置
         */

        //  最外层需要有根标签
        let div345 = <div>
                <div>内容</div>
                <div></div>
            </div>
        
        // 自结束标签没有加'/'，提示错误
        // const div4 = <div>
        //     <input type="text">
        // </div>
        div345 = <div>
            <div>内容</div>
            <input type="text"/>
        </div>

        // 使用{}嵌入表达式
        const name = 'jiadeyu'
        const fn = function () {return 'zlx'}
        div345 = <div>
            <div>内容</div>
            <input type="text"/>
            <p>{name}</p>
            <p>{fn()}</p>
        </div>

        // JSX中设置属性和事件
        div345 = <div>
            <div>内容</div>
            <input type="text"/>
            <p>{name}</p>
            <p>{fn()}</p>
            <button 
                className="button"
                style={
                    {
                        backgroundColor: '#ff4700',
                        color: '#fff'
                    }
                }
                id = "btn"
                onClick={() => alert(`注意安全`)}>提示
            </button>
        </div>

        root.render(div345)
    </script>
</body>

</html>